<template>
  <div>
    <HeaderCategory :disabled="spuShow !== '1'"></HeaderCategory>
    <el-card style="margin: 0 30px;">
      <!-- 默认展示我们的SpuList -->
      <spuList v-if="spuShow === '1'" :isShowSpu="isShowSpu"></spuList>
      <!-- 添加和修改是同一个组件  === 2 -->
      <spuForm v-else-if="spuShow === '2'" :isShowSpu="isShowSpu" :spu="spuInfo"></spuForm>
      <skuForm v-else :spu="spuInfo" :isShowSpu="isShowSpu"></skuForm>
    </el-card>
  </div>
</template>
<!-- {
  "category3Id": 0,
  "description": "string",
  "id": 0,
  "spuImageList": [
    {
      "id": 0,
      "imgName": "string",
      "imgUrl": "string",
      "spuId": 0
    }
  ],
  "spuName": "string",
  "spuSaleAttrList": [
    {
      "baseSaleAttrId": 0,
      "id": 0,
      "saleAttrName": "string",
      "spuId": 0,
      "spuSaleAttrValueList": [
        {
          "baseSaleAttrId": 0,
          "id": 0,
          "isChecked": "string",
          "saleAttrName": "string",
          "saleAttrValueName": "string",
          "spuId": 0
        }
      ]
    }
  ],
  "tmId": 0
} -->
<script>
import spuList from './spuList/index.vue'
import spuForm from './spuForm/index.vue'
import skuForm from './skuForm/index.vue'
export default {
  name: 'Spu',
  data() {
    return {
      spuShow: '1',// 控制展示的组件
      spuInfo: {// 初始数据
        category3Id: 0,
        description: '',
        spuImageList: [],
        spuName: '',
        spuSaleAttrList: [],
      }
    }
  },
  components: {
    spuList,
    spuForm,
    skuForm
  },
  methods: {
    // 控制那个模块展示
    isShowSpu({ val, category3Id, row }) {// val 是跳转的目的地  category3Id是当前分类的目录(都需要)  row 如果有row说明是添加，将我们的数据直接给他就可以了
      if (!row) {
        // 如果不是第一次进入添加有可能还保留着上一次的数据，所以我们每次点击添加都把上一次的数据给清空掉
        this.spuInfo = {// 初始数据
          category3Id,
          description: '',
          spuImageList: [],
          spuName: '',
          spuSaleAttrList: [],
          tmId: ''
        }
      } else {// 修改
        // 修改的话是有id这些的，直接将row赋值给this.spuInfo就可以了
        // 不用担心引用地址相同，因为使用的是v-if  v-if删除元素
        this.spuInfo = row
      }
      // 全部处理完毕，然后进行跳转
      this.spuShow = val
    },
  }
}
</script>

<style lang="less" scoped></style>
